<template>
	<view class="search">
		<view class="search-container">
			<uni-search-bar @input="input" :radius="20" bgColor="#F7F7F7"  cancelButton="none" placeholder="请输入搜索内容" >
			</uni-search-bar>
		</view>
		<!-- 搜索列表 -->
		<view v-if="flowList.length!=0">
<!-- 			<view class="search-list" v-for="(searchItem,searchIndex) in searchList" :key="searchIndex" >
				<uni-icons type="search" size="18" color="#C0C0C0"/>
				<view class="search-item" >
					{{searchItem.word}}
				</view>
			</view> -->
			<view class="wrap">
				<u-waterfall v-model="flowList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @tap="gotoPro(item.productId,item.productByStore)">
							<u-lazy-load threshold="-450" border-radius="10" :image="item.productImgUrl"
								:index="index"></u-lazy-load>
							<view class="demo-title">
								{{item.productName}}
							</view>
							<view class="demo-price">
								{{item.productPrice}}元
							</view>
							<view class="demo-tag">
								<view class="demo-tag-owner">
									自营
								</view>
								<view class="demo-tag-text">
									放心购
								</view>
							</view>
							<view class="demo-shop">
								{{item.productByStore}}
							</view>
			
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @tap="gotoPro(item.productId,item.productByStore)">
							<u-lazy-load threshold="-450" border-radius="10" :image="item.productImgUrl"
								:index="index"></u-lazy-load>
							<view class="demo-title">
								{{item.productName}}
							</view>
							<view class="demo-price">
								{{item.productPrice}}元
							</view>
							<view class="demo-tag">
								<view class="demo-tag-owner">
									自营
								</view>
								<view class="demo-tag-text">
									放心购
								</view>
							</view>
							<view class="demo-shop">
								{{item.productByStore}}
							</view>
			
						</view>
					</template>
				</u-waterfall>
			</view>
			
		</view>
		<view v-else>
			<!-- 搜索历史 -->
			<view class="history" v-model="his">
				<view class="history-title">
					<text>历史搜索</text>
					<uni-icons type="trash" size="20" color="#C0C0C0" @click="clearHistory"></uni-icons>
				</view>
				<view class="history-content" v-if="historyList.length!=0">
					<view class="history-item" v-for="(historyItem,historyIndex) in historyList" :key="historyIndex">
						{{historyItem}}
					</view>
				</view>
				<view class="history-none" v-else>
					<text>无搜索历史</text>
				</view>
			</view>
			<!-- 搜索发现 -->
			<view class="found">
				<view class="found-title">
					<text>搜索发现</text>
					<uni-icons type="" size="20" color="#C0C0C0"></uni-icons>
				</view>
				<view class="found-content">
					<view class="found-item" v-for="(foundItem,foundIndex) in foundList" :key="foundIndex">
						{{foundItem}}
					</view>
				</view>
			</view>
		</view>
		
	</view>	
</template>
 
<script>
	import {
		store
	} from '@/uni_modules/uni-id-pages/common/store.js';
	import {
		get,
		post,
		setToken
	} from '@/utils/api.js';
	import { UniSearchBar } from '@dcloudio/uni-ui';
	export default {
		components:{
			UniSearchBar
		},
		data() {
			return {
				loadStatus: 'loadmore',
				flowList: [],
				list: [{}],
				 his: false,
				// 初始化定时器为空
				time:null,
				// 用户输入的关键词
				keyword:'',
				//搜索数据的数组初始化
				searchList:[],
				//搜索历史初始化
				historyList:[],
				// 初始化搜索发现列表
				foundList:['宠物','宠物周边','柯基','熊猫','布偶猫','德文卷毛猫']
			};
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			// 模拟数据加载
			setTimeout(() => {
				this.addRandomData();
				this.loadStatus = 'loadmore';
			}, 1)
		},
		methods:{
			addRandomData() {
				for (let i = 0; i < 10; i++) {
					let index = this.$u.random(0, this.list.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.list[index]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			gotoPro(productId,productByStore) {
				uni.setStorageSync('productId',productId)
				uni.setStorageSync('productByStore',productByStore)
				uni.navigateTo({
					url:'/pages/proDetail/proDetail'
				})
			},
			//用户输入时可以获取用户输入的内容
			input:function(e){
				//每次使用先清空定时器，优化
				clearTimeout(this.timer);
				this.timer=setTimeout(()=>{
					this.keyword=e
					//获取搜索数据
					this.getSearchContent()
				},500)
				console.log(e)
			},
			//获取搜索列表的方法
			async getSearchContent(){
				if(this.keyword.length==0){
					this.searchList=[];
					this.list = []
					this.flowList = []
					return
				}else{
						get('/product/getProductInfo/key',
						{
						 keyword:this.keyword
						}, {
						  needToken: true, 
							success: (res) => {
							if (res.statusCode === 200 && res.data.data.length !== 0) {
						// this.searchList = res.data.data
						this.list = res.data.data
						this.flowList = res.data.data
						console.log(this.list)
						//把搜索的关键字保存到historyList中
						this.saveHistory()
							}
							else{
						uni.showToast({
						    title: '获取数据失败',
						    icon: 'none'
						    });
							}
						  }
						}); 
				}
			},
			// 保存历史记录
			saveHistory(){
				if(this.historyList.indexOf(this.keyword)==-1){
					this.historyList.unshift(this.keyword)
					// 把用户输入的内容保存到历史记录当中
					uni.setStorageSync('kw',JSON.stringify(this.historyList||'[]'))
				}				
			},
			// 清空历史记录
			clearHistory(){
			  this.historyList=[];
			  uni.setStorageSync('kw','[]');
			  this.his = false; // 直接设置 his 为 false
			}
		},
		onLoad() {
		  // 从缓存中读取历史记录
		  this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]');
		},
	}
</script>
 
<style lang="scss">
*{
	margin: 0;
	padding: 0;
}
.search{
	width: 100%;
	height: 100vh;
	background-color: #FFF;
	.search-container{
		width: 100%;
	}
	.search-list{
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		border-bottom: 1px solid #eee;
		uni-icons{
			margin:0 20rpx;
		}
	}
	.history{
		.history-title{
			width: 90%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			text{
				font-weight: bold;
				font-size: 34rpx;
			}
		}
		.history-content{
			width: 90%;
			margin: 10rpx auto;
			display: flex;
			flex-wrap: wrap;
			.history-item{
				height: 50rpx;
				line-height: 50rpx;
				background-color: #F8F8F8;
				margin-top: 10rpx;
				margin-right: 20rpx;
				padding:0 20rpx;
				border-radius: 20rpx;
			}
		}
		.history-none{
			width: 100%;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
		}
	}
	.found{
		margin-top: 50rpx;
		.found-title{
			width: 90%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			text{
				font-weight: bold;
				font-size: 34rpx;
			}
		}
		.found-content{
			width: 90%;
			margin: 10rpx auto;
			display: flex;
			flex-wrap: wrap;
			.found-item{
				height: 50rpx;
				line-height: 50rpx;
				background-color: #F8F8F8;
				margin-top: 10rpx;
				margin-right: 20rpx;
				padding:0 20rpx;
				border-radius: 20rpx;
			}
		}
	}
}
 .demo-warter {
 	border-radius: 8px;
 	margin: 5px;
 	background-color: #ffffff;
 	padding: 8px;
 	position: relative;
 }
 
 .u-close {
 	position: absolute;
 	top: 32rpx;
 	right: 32rpx;
 }
 
 .demo-image {
 	width: 100%;
 	border-radius: 4px;
 }
 
 .demo-title {
 	font-size: 30rpx;
 	margin-top: 5px;
 	color: $u-main-color;
 }
 
 .demo-tag {
 	display: flex;
 	margin-top: 5px;
 }
 
 .demo-tag-owner {
 	background-color: $u-type-error;
 	color: #FFFFFF;
 	display: flex;
 	align-items: center;
 	padding: 4rpx 14rpx;
 	border-radius: 50rpx;
 	font-size: 20rpx;
 	line-height: 1;
 }
 
 .demo-tag-text {
 	border: 1px solid $u-type-primary;
 	color: $u-type-primary;
 	margin-left: 10px;
 	border-radius: 50rpx;
 	line-height: 1;
 	padding: 4rpx 14rpx;
 	display: flex;
 	align-items: center;
 	border-radius: 50rpx;
 	font-size: 20rpx;
 }
 
 .demo-price {
 	font-size: 30rpx;
 	color: $u-type-error;
 	margin-top: 5px;
 }
 
 .demo-shop {
 	font-size: 22rpx;
 	color: $u-tips-color;
 	margin-top: 5px;
 }
</style>